<script>
export default {
  name: "StatusCard"
}
</script>

<template>
  <el-card>
    <el-descriptions
        title="账号状态"
        :column="1"
        size="large"
        border
    >
      <el-descriptions-item label="ID">{{ this.$store.state.user.id }}</el-descriptions-item>
      <el-descriptions-item label="名称">{{ this.$store.state.user.nickname }}</el-descriptions-item>
      <el-descriptions-item v-if="this.$store.state.user.email != null" label="邮箱">
        {{ this.$store.state.user.email }}
      </el-descriptions-item>
      <el-descriptions-item v-if="this.$store.state.user.phone != null" label="手机号码">
        {{ this.$store.state.user.phone }}
      </el-descriptions-item>
      <el-descriptions-item v-if="this.$store.state.user.giteeId != null" label="Gitee">
        <el-link :href="'https://gitee.com/' + this.$store.state.user.giteeName">
          <template #icon>
            <el-icon size="large">
              <el-image src="/logo_gitee.svg"/>
            </el-icon>
          </template>
          {{ 'https://gitee.com/' + this.$store.state.user.giteeName }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item v-if="this.$store.state.user.githubId != null" label="Github">
        <el-link :href="'https://github.com/' + this.$store.state.user.githubName">
          <template #icon>
            <el-icon size="large">
              <el-image src="/logo_github.svg"/>
            </el-icon>
          </template>
          {{ 'https://github.com/' + this.$store.state.user.githubName }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="注册时间">{{ this.$store.state.user.createTime }}</el-descriptions-item>
      <el-descriptions-item label="最后更新">{{ this.$store.state.user.updateTime }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag size="large" v-if="this.$store.state.user.status === 1" type="success">启用</el-tag>
        <el-tag size="large" v-if="this.$store.state.user.status === 0" type="danger">停用</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<style scoped>

</style>